import { endsTimeAnimation } from '../../../Func/uniFunc/Func/endsTimeAnimation';
import { settimeNth } from '../../../Func/uniFunc/Func/setNthTime';
import { create_staticCssTxt_mana } from '../../css/setStaticCsstxt';
import {
  getElementViewOffsetPosi,
  normalizeContainer,
  packNode,
} from '../../Func';
import { fromToAnima_dataMana } from './cla_fromToAnima_dataMana';
import { fromToAnima_keyframeObj } from './cla_fromToAnima_keyframeObj';

const fromToAnima_operateTag = 'fromToAnima_operate';

const fromToAnima_classname_prefix = 'fromToAnima_prefix_';

const fromToAnima_animaClassname_prefix = 'fromToAnima_animaClass_prefix_';

const staticCss = create_staticCssTxt_mana('fromToAnima');

class fromToAnima_operate extends fromToAnima_dataMana {
  get [Symbol.toStringTag]() {
    return fromToAnima_operateTag;
  }

  constructor() {
    super();
  }

  /**
   * 应用动画
   * @param {HTMLElement[] | HTMLElement} dragFromElArr
   * @param {HTMLElement} toEl
   */
  activeAnima(dragFromElArr, toEl) {
    if (dragFromElArr instanceof HTMLElement) {
      dragFromElArr = [dragFromElArr];
    }

    // 移除 所有 之前的 style
    staticCss.removeAll();

    this.toEl = toEl;

    for (const ind in dragFromElArr) {
      let uniEl = dragFromElArr[ind];

      settimeNth(ind * 100, () => {
        this.fromEl = uniEl;

        let cssStyle = this.createCss();

        staticCss.setStaticCssTxt(
          fromToAnima_classname_prefix + uniEl.id,
          cssStyle
        );

        let curEl = document.createElement('div');

        curEl.style = 'position:absolute;';

        packNode(document.body, curEl, true, normalizeContainer('app'));

        let laterDrop = endsTimeAnimation(curEl, this.animation_obj.name);

        settimeNth(laterDrop, () => {
          curEl.remove();
        });
      });
    }
  }

  /**
   * 根据 this.animation_obj 和 from to EL 位置 创建 animation class
   * @returns
   */
  createCss() {
    let fromEl_style_obj = new fromToAnima_keyframeObj(this.fromEl);
    let toEl_style_obj = new fromToAnima_keyframeObj(this.toEl);

    let cur_animation_obj = this.animation_obj;

    cur_animation_obj.name = fromToAnima_animaClassname_prefix + this.fromEl.id;

    let fromElPosi = getElementViewOffsetPosi(this.fromEl);
    let toElPosi = getElementViewOffsetPosi(this.toEl);
    // console.log(fromElPosi, toElPosi);

    let ret = `
 .${cur_animation_obj.name} {
        position: absolute;
        background-color: #778999;
        animation-name: ${cur_animation_obj.keyframeName};
        animation-duration: ${cur_animation_obj.duration}s;
        animation-delay: ${cur_animation_obj.delay}s;
        animation-timing-function: ${cur_animation_obj.timing_function};
        animation-fill-mode: ${cur_animation_obj.fill_mode};
  }

 @keyframes ${cur_animation_obj.keyframeName}{
    0%{
        ${fromEl_style_obj.toStringStyle()}
        top: ${fromElPosi.offsetTop}px;
        left: ${fromElPosi.offsetLeft}px;
      
        width: ${fromElPosi.width}px;
        height: ${fromElPosi.height}px;
    }
    100%{
        ${toEl_style_obj.toStringStyle()}
        top: ${toElPosi.offsetTop}px;
        left: ${toElPosi.offsetLeft}px;
      
        width: ${toElPosi.width}px;
        height: ${toElPosi.height}px;
    }
 }`;
    // console.log(ret);
    return ret;
  }
}

export { fromToAnima_operate };
